<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <ul class="block-box capital-ul">
                <li v-for="(item,index) in dataList">
                    <div>
                        <div class="main-color big-font-size">账户充值</div>
                        <div class="three-color big-font-size">2021-05-12 12:12:12</div>
                    </div>
                    <div class="main-color big-font-size">+￥2000</div>
                </li>
            </ul>
            <!--<div class="seize-seat light-color">&#45;&#45; 没有数据了 &#45;&#45;</div>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: "CapitalList",
        data() {
            return {
                page:1,
                total:3,
                GetWindowBackground: {
                    'min-height': ''
                },
                dataList: [
                    {
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    },{
                        title:'账户充值',
                        price:'3000',
                        time:'2021-05-12 12:12:12'
                    }
                ],

            }
        },
        methods: {

            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
            handleScroll () { // 滚动到底部，再加载的处理事件
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动的距离
                let clientHeight = document.documentElement.clientHeight;//页面的高度
                let scrollHeight = document.documentElement.scrollHeight;//body内容的高度
                // console.log(scrollTop,clientHeight,scrollHeight)
                if (scrollTop + clientHeight >= scrollHeight) { // 滚动到底部
                    //事件处理
                    console.log("到底部了")//此处可以添加数据请求
                    // this.$axios.get("/static/data.json").then((res)=>{
                    //     //console.log(res.data.lists.length)
                    //     if(this.k>res.data.lists.length-1)
                    //     {
                    //         console.log(this.list)
                    //         console.log("数据加载完毕")
                    //         this.k=this.list.length-1;
                    //     }
                    //     else
                    //     {
                    //         this.list.push(res.data.lists[this.k])
                    //     }
                    //     this.k++;
                    //     console.log(this.k)
                    // })
                }
            },
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll); // 滚动到底部，再加载的处理事件
            // this.$axios.get("/static/data.json").then((res)=>{
            //     this.list=res.data.list;
            // })
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.handleScroll)
        },
    }
</script>

<style lang="scss" scoped>

    .capital-ul {
        li{
            width: 100%;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom:1px dashed #ececec;
            padding: 10px 0;
        }
    }

</style>